<!--
@description: 供应商主页
@creationTime: 2025-04-09
-->

<route type="home" lang="json5">
{
  layout: 'tabBar',
  style: {
    navigationBarTitleText: '首页',
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view
    class="box-border pos-fixed top-0 w-100vw z-999"
    :class="scrollTo ? 'bg-#3c7bcd!' : 'bg-#fff!'"
    :style="{ height: navHeight + 40 + 'px' }"
  >
    <view class="flex" :style="{ paddingTop: navHeight + 'px' }">
      <view class="ml-3" v-show="scrollTo">
        <wd-img
          :width="30"
          :height="30"
          radius="20rpx"
          src="https://bkimg.cdn.bcebos.com/pic/6f061d950a7b02087bf4d1bc4c80e5d3572c11df626e?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080"
        />
      </view>
      <view class="ml-3 w-55vw" v-show="scrollTo" @click="goProject">
        <wd-search placeholder="搜索项目列表" light hide-cancel custom-class="p-0! border-rd-30rpx" disabled />
      </view>
      <view v-show="!scrollTo" class="ml-3 w-65vw" @click="goProject">
        <wd-search placeholder="搜索项目列表" hide-cancel custom-class="p-0! border-rd-30rpx" disabled />
      </view>
    </view>
  </view>

  <scroll-view scroll-y class="h-92vh box-border" :show-scrollbar="false" @scroll="onScroll">
    <view class="position-absolute bg-#3c7bcd top-0 w-100vw h-26vh border-rd-b-20rpx"></view>
    <view class="mt-12vh px-3">
      <wd-swiper
        :list="swiperList"
        :indicator="true"
        autoplay
        v-model:current="current"
        @click="handleClick"
        @change="onChange"
      ></wd-swiper>
    </view>
    <view class="mt-3">
      <wd-card custom-class="p-0!">
        <wd-notice-bar
          text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
          prefix="check-outline"
          color="#7a7a7a"
          background-color="#ffffff"
        >
          <template #suffix>
            <wd-icon name="arrow-right" size="26rpx"></wd-icon>
          </template>
        </wd-notice-bar>
      </wd-card>
    </view>

    <view class="flex flex-justify-between m-4 flex-items-center">
      <text class="text-lg font-size-3 font-800">常用功能</text>
      <!-- <text class="font-size-3 c-#347cd0">查看全部</text> -->
    </view>

    <view class="">
      <wd-card custom-class="p-0!">
        <wd-grid :column="4" bg-color="#ffffff">
          <wd-grid-item icon="picture" text="创建项目" />
          <wd-grid-item icon="picture" text="工单列表" />
          <wd-grid-item icon="picture" text="日志填报" />
          <wd-grid-item icon="picture" text="待我审批" />
        </wd-grid>
      </wd-card>
    </view>

    <view class="flex flex-justify-between m-4 flex-items-center">
      <text class="text-lg font-size-3 font-800">项目展示</text>
      <text class="font-size-3 c-#347cd0">查看全部</text>
    </view>

    <view class="mt-3">
      <ProjectCard></ProjectCard>
      <ProjectCard></ProjectCard>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import ProjectCard from '@/components/ProjectCard.vue'
const current = ref<number>(0)
const scrollTo = ref(true)
const navHeight = ref<number>(0)
const menuButtonInfo = ref<any>(null)
// 模拟 onLoad 生命周期
onMounted(() => {
  // 获取胶囊按钮位置
  const menuButtonBounding = uni.getMenuButtonBoundingClientRect()
  // 计算导航栏高度（胶囊按钮 bottom + 下方间距）
  menuButtonInfo.value = menuButtonBounding
  navHeight.value = menuButtonBounding.top
  console.log('navHeight.value', navHeight.value)
})
const goProject = () => {
  uni.navigateTo({
    url: '/pages/project/index'
  })
}
const onScroll = e => {
  if (e.detail.scrollTop > 10) {
    scrollTo.value = false
  } else {
    scrollTo.value = true
  }
}
const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
])
function handleClick(e) {}
function onChange(e) {}
</script>

<style lang="scss" scoped></style>
